<template>
	<view class="content">
		<f-navbar title="修改密码" fontColor="#333" fontSize="34" bgColor="#fff">
			<view class="u-flex" slot="left">
				<van-icon name="arrow-left" color="#333" size="20" />
			</view>
		</f-navbar>
		<view class="content_box">
			<view class="phonebox">
				<view class="phone_name">
					手机号：
				</view>
				<view class="phone_txt">
					+86
					<input :value="phoneValue" @input="onphone" type="number" maxlength="11" class="phone_input"
						placeholder-class="place_class" placeholder="请输入手机号">
				</view>
			</view>
			<view class="code_box">
				<view class="code_boxname">
					验证码：
				</view>
				<view class="code_boxtxt">
					<input :value="codeValue" @input="oncode" type="number" maxlength="6" class="code_input"
						placeholder-class="place_class" placeholder="请输入验证码">
					<view class="code_btn" @click="getCode" v-show="isshowcode">
						获取验证码
					</view>
					<view class="code_btn" v-show="!isshowcode">
						{{count}}s
					</view>
				</view>
			</view>
			<view class="passwordbox">
				<view class="passwordboxname">
					新密码：
				</view>
				<view class="passwordboxtxt">
					<input :value="passwordValue" @input="onpassword" type="number" maxlength="18" class="code_input"
						placeholder-class="place_class" placeholder="请输入新密码">
				</view>
			</view>
			<view class="passwordbox">
				<view class="passwordboxname">
					确认密码：
				</view>
				<view class="passwordboxtxt">
					<input :value="password" @input="onpassword1" type="number" maxlength="18" class="code_input"
						placeholder-class="place_class" placeholder="请确认新密码">
				</view>
			</view>

			<view class="submit" @click="onsubmit">
				提 交
			</view>

		</view>
	</view>
</template>

<script>
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	import {
		upPwd
	} from '../../../utils/storeapp.js'
	import {
		sendSmsCode
	} from '../../../utils/app.js'
	export default {
		components: {
			fNavbar
		},
		data() {
			return {

				imgurl: getApp().globalData.imgurl,
				phoneValue: '', // 输入手机号
				codeValue: '', // 输入验证码
				passwordValue: '', // 输入新密码
				password: '', // 输入确认密码
				isshowcode: true, //验证码倒计时
				count: '', // 验证码倒计时时间
			}
		},
		methods: {

			// 点击提交数据
			onsubmit() {
				upPwd({
					phone: this.phoneValue,
					sms_code: this.codeValue,
					new_pwd: this.passwordValue,
					sec_pwd: this.password
				}).then(res => {
					console.log(res.data);
					uni.showToast({
						title:'修改成功',
						icon:'none'
					})
				})
			},


			getCode() {
				if(this.phoneValue==''){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
				} else{
					sendSmsCode({
						phone: this.phoneValue
					}).then(res => {
						console.log(res);
						// this.cartnum = res.data.all_cart_num
						const TIME_COUNT = 60;
						if (!this.timer) {
							this.count = TIME_COUNT;
							this.isshowcode = false;
							this.timer = setInterval(() => {
								if (this.count > 0 && this.count <= TIME_COUNT) {
									this.count--;
									console.log(this.count);
								} else {
									this.isshowcode = true;
									clearInterval(this.timer);
									this.timer = null;
								}
							}, 1000)
						}
					})
				}


			},
			// 输入确认密码
			onpassword1(e) {
				this.password = e.detail.value
			},
			// 输入新密码
			onpassword(e) {
				this.passwordValue = e.detail.value
			},
			// 输入手机号
			onphone(e) {
				this.phoneValue = e.detail.value
			},
			// 输入验证码
			oncode(e) {
				this.codeValue = e.detail.value
			},
		},
	}
</script>

<style>
	page {
		background: #eee;
	}

	.phonebox {
		width: 100%;
		height: 110rpx;
		background: #FFFFFF;
		border-top: 2rpx solid #eee;
		display: flex;
		align-items: center;
	}

	.phone_name {
		font-size: 32rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 42rpx;
	}

	.place_class {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #BBBBBB;

	}

	.phone_input {
		padding-left: 22rpx;
	}

	.phone_txt {
		display: flex;
		align-items: center;
		margin-left: 21rpx;
	}

	.code_box {
		width: 100%;
		height: 110rpx;
		background: #FFFFFF;
		border-top: 2rpx solid #eee;
		display: flex;
		align-items: center;
	}

	.code_boxname {
		width: 190rpx;
		font-size: 32rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 42rpx;
	}

	.code_boxtxt {
		width: 60%;
		display: flex;
		align-items: center;
		margin-left: 33rpx;
	}

	.code_input {}

	.code_btn {
		width: 158rpx;
		height: 50rpx;
		background: #FF0000;
		border-radius: 25rpx;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 50rpx;
		text-align: center;
	}

	.passwordbox {
		width: 100%;
		height: 110rpx;
		background: #FFFFFF;
		border-top: 2rpx solid #eee;
		display: flex;
		align-items: center;
	}

	.passwordboxname {
		width: 190rpx;
		font-size: 32rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 42rpx;
	}

	.passwordboxtxt {
		/* 	display: flex;
		align-items: center; */
		margin-left: 33rpx;
	}

	.submit {
		width: 670rpx;
		height: 88rpx;
		background: #EF0E6C;
		border-radius: 44rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		font-size: 36rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFEFE;
		line-height: 88rpx;
		text-align: center;
	}
</style>